<template>
  <view class="login">
    <view class="login_title" :style="{ paddingTop: safeTop + 'px' }">
      登录
    </view>
    <view class="login_content">
      <view class="login_avator">
        <image :src="filePath" mode="scaleToFill" />
      </view>
      <view class="login_tips">
        <h1>登录后可享受更多服务</h1>
        <h6>获得你的公开信息</h6>
      </view>
      <!-- 	<button class="login_btn" open-type="getUserInfo" @getuserinfo="getUserInfo" withCredentials="true">
				授权登录
			</button> -->
      <button class="login_btn" @click="open">授权登录</button>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="test-popup">
        <view class="title-text-1"> 请输入头像和昵称 </view>
        <view class="title-text-2"> 用于显示个人资料 </view>
        <view class="title-text-3">
          <view class="box1">
            <view class="title-text-3-1"> 头像 </view>
            <view class="title-text-3-2">
              <button
                class="avatar"
                open-type="chooseAvatar"
                @chooseavatar="onChooseAvatar"
              >
                <image class="avatar" :src="avatarUrl"></image>
              </button>
            </view>
          </view>
        </view>
        <view class="title-text-4">
          <view class="title-text-4-1"> 昵称 </view>
          <view class="title-text-4-2">
            <input
              type="nickname"
              placeholder="请输入昵称"
              class="iput"
              :value="textnikname"
              @change="getNickname"
            />
          </view>
        </view>
        <view class="title-text-5">
          <button class="button-1" @click="close">取消</button>
          <button class="button-2" @click="submit">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { login, avatarNickname, getMyInfo } from "../../api/api.js";
export default {
  data() {
    return {
      safeTop: "",
      show: false,
      avatarUrl:
        "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
      textnikname: "",
    };
  },
  onLoad: function () {
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.safeTop = menuButtonInfo.top;
    uni.showLoading({
      title: "请稍后...",
    });
    const token = uni.getStorageSync("token");
    if (token) {
      setTimeout(() => {
        uni.redirectTo({
          url: "/pages/order/order",
        });
        uni.hideLoading();
      }, 1000);
    } else {
      uni.hideLoading();
    }
  },
  computed: {
    filePath() {
      return `../../static/image/avator.png`;
    },
  },
  methods: {
    getUserInfo() {
      uni.showLoading({
        title: "登录中...",
      });
      const that = this;
      uni.login({
        success(res) {
          console.log(res, "11111111111");
          login({
            code: res.code,
            role: 1,
          }).then((dd) => {
            console.log(dd, "5555555555555555555555555555");
            uni.setStorageSync("token", dd.data);
            uni.getUserInfo({
              success: (res) => {
                uni.redirectTo({
                  url: "/pages/order/order",
                });
              },
              fail: () => {
                // 获取失败的去引导用户授权
                uni.showToast({
                  title: "您需要授权，才能获取您的信息！",
                });
              },
              complete: () => {
                uni.hideLoading();
              },
            });
          });
        },
      });
    },
    open() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持
      //['top','left','bottom','right','center']
      this.$refs.popup.open("bottom"); //底部弹出
    },
    close() {
      this.$refs.popup.close();
    },
    login() {
      this.show = true;
    },
    onChooseAvatar(e) {
      console.log("微信头像信息", e.detail.avatarUrl);
      console.log("昵称", this.textnikname);
      // 将数据赋值
      this.avatarUrl = e.detail.avatarUrl;
    },
    getNickname(e) {
      this.textnikname = e.detail.value;
    },
    submit() {
      uni.showLoading({
        title: "登录中...",
      });
      const that = this;
      console.log(
        this.avatarUrl,
        "78888888888888888888888888888888888888888888888888"
      );
      uni.login({
        success(res) {
          console.log(res, "11111111111");
          login({
            code: res.code,
            role: 1,
          }).then((dd) => {
            console.log(dd, "5555555555555555555555555555");
            uni.setStorageSync("token", dd.data);
            uni.getUserInfo({
              // success: (res) => {
              // 	console.log(res, '666666666666666666')
              // 	uni.redirectTo({
              // 		url: "/pages/order/order",
              // 	});
              // },
              success: (res) => {
                // 获取用户信息
                console.log("getUserInfo的返回", res);
                getMyInfo().then((info) => {
                  // console.log('用户信息',info)
                  console.log(
                    that.avatarUrl,
                    "78888888888888888888888888888888888888888888888888"
                  );
                  avatarNickname({
                    userImg: that.avatarUrl,
                    openid: info.data.openid,
                    userName: that.textnikname,
                  }).then((res) => {
                    console.log("upDateInfo的返回", res);
                    // if(res.code===200){
                    // 	 getMyInfo().then((res)=>{
                    // 		 console.log(res,'xinxixixixixixixixixixi')
                    // 	 })
                    // }
                    uni.redirectTo({
                      url: "/pages/order/order",
                    });
                  });
                });
              },
              fail: () => {
                // 获取失败的去引导用户授权
                uni.showToast({
                  title: "您需要授权，才能获取您的信息！",
                });
              },
              complete: () => {
                uni.hideLoading();
              },
            });
          });
        },
      });
      // avatarNickname({
      // 	userName:this.textnikname,
      // 	userImg:this.avatarUrl,
      // }).then((res)=>{
      // 	console.log('头像昵称的返回',res)
      // })
    },
  },
};
</script>

<style lang="scss">
page {
  background: #fbf6fa;
}

.login {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 40rpx;
  justify-content: center;
  height: calc(100vh - 80rpx);
  flex: 1;

  .login_title {
    font-size: 30rpx;
    font-weight: bold;
  }

  .login_content {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 100%;
    margin-top: -300rpx;
  }

  .login_avator {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    padding: 4rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 1px solid #e8e3e7;

    image {
      width: 190rpx;
      height: 190rpx;
      border-radius: 50%;
    }
  }

  .login_tips {
    margin-top: 40rpx;
    padding-top: 60rpx;
    border-top: 1px solid #e8e3e7;

    h1 {
      font-weight: bold;
      font-size: 30rpx;
      color: #262626;
    }

    h6 {
      margin-top: 30rpx;
      font-size: 24rpx;
      color: #938e92;
    }
  }

  .login_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80rpx;
    border-radius: 100rpx;
    background: linear-gradient(180deg, #ff8d1a 12.5%, #ffc300 100%);
    color: #fff;
    font-size: 28rpx;
    font-weight: 700;
    margin-top: 70rpx;
  }
}
.test-popup {
  background: white; //默认全屏时灰色，只需要把你需要的部分改成白色
  // padding-top: 20px;
  border-radius: 20px 20px 0 0; //设置弧度的大小
  height: 295px;
  position: relative;
  margin-bottom: -34px;

  .title-text-1 {
    width: 100%;
    text-align: center;
    // font-size: 17px;
    margin-bottom: 20px;
    position: absolute;
    top: 15px;
  }

  .title-text-2 {
    width: 100%;
    text-align: center;
    font-size: 22rpx;
    color: #666;
    position: absolute;
    top: 55px;
  }

  .title-text-3 {
    position: absolute;
    width: 100%;
    top: 70px;
    padding: 16rpx;
    box-sizing: border-box;

    .box1 {
      width: 100%;
      border-bottom: 1px solid #dedede;
      padding-bottom: 10rpx;
      display: flex;

      .title-text-3-1 {
        font-size: 32rpx;
        color: #818181;
        width: 120rpx;
        text-align: center;
        line-height: 57px;
      }

      .title-text-3-2 {
        width: 55px;
        height: 55px;
        border: 1px dashed #cccccc;
        margin-left: 55rpx;

        .avatar {
          width: 100%;
          height: 100%;
          background: #22ac38;
          padding: 0;
        }
      }
    }
  }

  .title-text-4 {
    position: absolute;
    width: 100%;
    display: flex;
    top: 145px;
    padding-left: 16rpx;

    .title-text-4-1 {
      font-size: 32rpx;
      color: #818181;
      width: 120rpx;
      text-align: center;
      line-height: 57px;
    }

    .title-text-4-2 {
      display: flex;
      align-items: center;
      margin-left: 55rpx;
    }
  }

  .title-text-5 {
    display: flex;
    width: 100%;
    position: absolute;
    justify-content: center;
    bottom: 86rpx;

    .button-1 {
      width: 170rpx;
      height: 60rpx;
      font-size: 32rpx;
      line-height: 60rpx;
      border: 0rpx;
      margin: 0;
      margin-right: 25rpx;
    }

    .button-2 {
      width: 170rpx;
      height: 60rpx;
      font-size: 32rpx;
      line-height: 60rpx;
      border: 0rpx;
      background-color: #22ac38;
      color: white;
      margin: 0;
      margin-left: 25rpx;
    }
  }
}
</style>
